<template>
	<view class="idle-container">
		<view class="header">
			<view class="header-left" @tap="goBack">
				<image src="../../static/public/left_arrow.png" mode="heightFix"></image>
			</view>
			<view class="header-title">闲置物品</view>
			<view class="header-right">
			</view>
		</view>
		<view class="bar-box">
			<view class="search-bar">
				<view class="location">
					<image mode="aspectFit" src="../../static/idle/under.png"></image><text>洛阳</text>
				</view>
				<view class="search-input">
					<image src="../../static/idle/search.png" mode="aspectFit"></image>
					<input type="text" placeholder="请输入搜索内容" v-model="searchKeyword">
					<image src="../../static/idle/photograph.png" mode="aspectFit"></image>
					<view class="search-input-button">搜索</view>
				</view>
			</view>
			<view class="notice-bar"><u-notice-bar :text="noticeList" :step="true" @click="click"
					:duration="3000"></u-notice-bar></view>
			<DaDropdownVue2 :dropdownMenu="dropdownMenuList" @confirm="handleConfirm" @close="handleClose"
				themeColor="black" textColor="#888A94" @open="handleOpen">
			</DaDropdownVue2>
		</view>
		<scroll-view scroll-y class="item-list">
			<view class="item-card" v-for="(item, index) in itemList" :key="index">
				<image :src="item.image" mode="aspectFill" class="item-image"></image>
				<view class="item-info">
					<text class="item-title">{{ item.title }}</text>
					<view class="item-location"><text>据您直线{{ item.distance }}公里</text><text>{{ item.views }}人看过</text>
					</view>
					<text class="item-location">{{ item.location }}</text>
					<text class="item-price">¥{{ item.price }}</text>
					<view class="item-user">
						<view class="item-user-info">
							<image :src="item.userAvatar" mode="aspectFill" class="user-avatar"></image>
							<text class="user-name">{{ item.userName }}</text>
						</view>
						<view class="user-rating">
							<image src="../../static/idle/credibility.png"></image>
							<view>信誉:优秀</view>
						</view>
					</view>
				</view>
				<view class="item-views">几乎全新<view></view>
				</view>
			</view>
		</scroll-view>

		<view class="dot" @click="gotoPublish">
			<image src="../../static/idle/idlecar.png" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
	import DaDropdownVue2 from '../../components/da-dropdown-vue2/index.vue'
	export default {
		components: {
			DaDropdownVue2
		},
		data() {
			return {
				searchKeyword: '',
				itemList: [{
						"image": "https://img1.baidu.com/it/u=626244246,3954182296&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067",
						"title": "出一台苹果15",
						"distance": "5.6",
						"location": "万福家园",
						"price": "3522.41",
						"userAvatar": "../../static/idle/treadmill.png",
						"userName": "张三",
						"userRating": "优秀",
						"views": 880
					},
					{
						"image": "https://img1.baidu.com/it/u=3094832340,946687117&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1062",
						"title": "出一台空调",
						"distance": "3.2",
						"location": "开封",
						"price": "998.00",
						"userAvatar": "../../static/idle/treadmill.png",
						"userName": "李四",
						"userRating": "一般",
						"views": 875
					},
					{
						"image": "https://img1.baidu.com/it/u=4026462745,596450512&fm=253&fmt=auto&app=120&f=JPEG?w=285&h=380",
						"title": "洗衣机8成新",
						"distance": "8.1",
						"location": "三门峡",
						"price": "906.57",
						"userAvatar": "../../static/idle/treadmill.png",
						"userName": "用户3",
						"userRating": "王五",
						"views": 397
					},
					{
						"image": "https://img0.baidu.com/it/u=407133736,1739079584&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800",
						"title": "出一台台式机",
						"distance": "1.3",
						"location": "三门峡",
						"price": "524.58",
						"userAvatar": "../../static/idle/treadmill.png",
						"userName": "赵六",
						"userRating": "一般",
						"views": 746
					},
					{
						"image": "https://img0.baidu.com/it/u=3009396400,610630133&fm=253&fmt=auto&app=138&f=JPEG?w=569&h=500",
						"title": "出一台茶几",
						"distance": "3.7",
						"location": "洛阳",
						"price": "684.82",
						"userAvatar": "../../static/idle/treadmill.png",
						"userName": "田七",
						"userRating": "良好",
						"views": 419
					},
					{
						"image": "../../static/idle/treadmill.png",
						"title": "测试物品6",
						"distance": "9.5",
						"location": "三门峡",
						"price": "512.71",
						"userAvatar": "../../static/idle/treadmill.png",
						"userName": "用户6",
						"userRating": "一般",
						"views": 313
					},
					{
						"image": "../../static/idle/treadmill.png",
						"title": "测试物品7",
						"distance": "2.5",
						"location": "开封",
						"price": "585.31",
						"userAvatar": "../../static/idle/treadmill.png",
						"userName": "用户7",
						"userRating": "良好",
						"views": 318
					},
					{
						"image": "../../static/idle/treadmill.png",
						"title": "测试物品8",
						"distance": "2.1",
						"location": "郑州",
						"price": "450.50",
						"userAvatar": "../../static/idle/treadmill.png",
						"userName": "用户8",
						"userRating": "一般",
						"views": 211
					},
					{
						"image": "../../static/idle/treadmill.png",
						"title": "测试物品9",
						"distance": "5.2",
						"location": "洛阳",
						"price": "483.82",
						"userAvatar": "../../static/idle/treadmill.png",
						"userName": "用户9",
						"userRating": "一般",
						"views": 61
					},
					{
						"image": "../../static/idle/treadmill.png",
						"title": "测试物品10",
						"distance": "4.1",
						"location": "三门峡",
						"price": "427.03",
						"userAvatar": "../../static/idle/treadmill.png",
						"userName": "用户10",
						"userRating": "一般",
						"views": 999
					},
					{
						"image": "../../static/idle/treadmill.png",
						"title": "测试物品11",
						"distance": "2.9",
						"location": "开封",
						"price": "137.43",
						"userAvatar": "../../static/idle/treadmill.png",
						"userName": "用户11",
						"userRating": "一般",
						"views": 79
					},
					{
						"image": "../../static/idle/treadmill.png",
						"title": "测试物品12",
						"distance": "0.1",
						"location": "开封",
						"price": "31.30",
						"userAvatar": "../../static/idle/treadmill.png",
						"userName": "用户12",
						"userRating": "良好",
						"views": 127
					},
					{
						"image": "../../static/idle/treadmill.png",
						"title": "测试物品13",
						"distance": "5.8",
						"location": "郑州",
						"price": "760.06",
						"userAvatar": "../../static/idle/treadmill.png",
						"userName": "用户13",
						"userRating": "优秀",
						"views": 89
					},
					{
						"image": "../../static/idle/treadmill.png",
						"title": "测试物品14",
						"distance": "0.3",
						"location": "三门峡",
						"price": "460.49",
						"userAvatar": "../../static/idle/treadmill.png",
						"userName": "用户14",
						"userRating": "良好",
						"views": 198
					},
					{
						"image": "../../static/idle/treadmill.png",
						"title": "测试物品15",
						"distance": "8.1",
						"location": "洛阳",
						"price": "940.42",
						"userAvatar": "../../static/idle/treadmill.png",
						"userName": "用户15",
						"userRating": "优秀",
						"views": 802
					}
				],
				noticeList: [],
				dropdownMenuList: [{
						title: '智能排序',
						type: 'cell',
						prop: 'god1',
						showAll: true,
						showIcon: true,
						value: '', 
						options: [{
								label: '距离近 → 远',
								value: '1',
							},
							{
								label: '距离远 → 近',
								value: '2'
							},
							{
								label: '价格高 → 低',
								value: '3'
							},
							{
								label: '价格高 → 高',
								value: '3'
							},
						],
					},
					{
						title: '位置距离',
						type: 'filter',
						prop: 'god4',
						value: {},
						options: [{
							title: '',
							type: 'radio',
							prop: 'ft1',
							options: [{
									label: '500米内',
									value: '1'
								},
								{
									label: '1公里内',
									value: '2'
								},
								{
									label: '2公里内',
									value: '3'
								},
								{
									label: '4公里内',
									value: '4'
								},
								{
									label: '8公里内',
									value: '5'
								},
								{
									label: '10公里内',
									value: '6'
								},
							],
						}, ],
					},
					{
						title: '价格区间',
						type: 'filter',
						prop: 'god4',
						value: {
						},
						options: [{
							title: '',
							type: 'radio',
							prop: 'ft1',
							options: [{
									label: '0-100￥',
									value: '1'
								},
								{
									label: '￥100-200',
									value: '2'
								},
								{
									label: '￥200-300',
									value: '3'
								},
								{
									label: '￥300-400',
									value: '4'
								},
								{
									label: '￥400-500',
									value: '5'
								},
								{
									label: '￥500+',
									value: '6'
								},
							],
						}, ],
					},
					{
						title: '筛选',
						type: 'picker',
						prop: 'god5',
						showAll: true,
						showIcon: true,
						field: {
							label: 'label',
							value: 'value',
							children: 'children',
						},
						value: [], // 默认选中 级联X22
						options: [{
								label: '家具',
								value: '1',
								children: [{
										label: '餐饮桌椅',
										value: '1-1',
									},
									{
										label: '货架展柜',
										value: '1-2',
									},
									{
										label: '沙发',
										value: '1-3',
									},
								],
							},
							{
								label: '数码',
								value: '2',
								children: [{
										label: '平板电脑',
										value: '2-1',
									},
									{
										label: '笔记本电脑',
										value: '2-2',
									},
									{
										label: '电脑外设',
										value: '2-3',
									},
								],
							},
							{
								label: '家用电器',
								value: '3',
								children: [{
										label: '洗衣机',
										value: '3-1',
									},
									{
										label: '冰箱',
										value: '3-2',
									},
									{
										label: '空调',
										value: '3-3',
									},
								],
							}
						],
					},

				],
			}
		},
		onLoad() {
			let arr = this.itemList;
			// const arr ={ ...this.itemList.splice(0,5)};
			for (const element of arr) {
				this.noticeList.push(element.userName + "发布了" + element.title)
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			gotoPublish(){
				uni.navigateTo({
					url:"/pages/idle/idle-publish"
				})
			},
			click(e) {
				console.log(e)
			},
			handleConfirm(v, selectedValue) {
				console.log('handleConfirm ==>', v, selectedValue)
			},
			handleClose(v, callbackMenuList) {
				console.log('handleClose ==>', v, callbackMenuList)
			},
			handleOpen(v) {
				console.log('handleOpen ==>', v)
			},
		}
	}
</script>


<style lang="scss" scoped>
	.idle-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.notice-bar {
		width: 95vw;
		margin: 1.5vw auto;
	}

	.bar-box {
		width: 100vw;
		background-color: #FCFBFA;
		// border-bottom: 1px solid #e5e5e5;
	}

	.header {
		display: flex;
		align-items: center;
		background-color: #ffffff;
		border-bottom: 1px solid #e5e5e5;
		margin-top: 3.5vh;
		padding-bottom: 1.5vh;

		.header-left,
		.header-right {
			width: 2vw;
			height: 2vw;

			image {
				height: 1.4vh;
				margin-left: 5vw;
			}
		}

		.header-title {
			flex: 1;
			text-align: center;
			font-size: 4vw;
			font-weight: bold;
		}
	}

	.search-bar {
		display: flex;
		align-items: center;
		padding: 3vw 0;
		width: 95vw;
		margin: 0 auto;
		justify-content: space-around;

		.location {
			display: flex;
			align-items: center;
			margin-right: 1vw;
			background-color: #ffffff;
			width: 18vw;
			height: 5vh;
			justify-content: center;
			border-radius: 1.5vh;
			font-size: 3.5vw;
			box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1);

			image {
				width: 5vw;
				height: 5vw;
				margin-right: 1vw;
			}
		}

		.search-input {
			display: flex;
			border-radius: 1.5vh;
			align-items: center;
			justify-content: center;
			background-color: #ffffff;
			box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1);
			width: 75vw;
			height: 5vh;

			input {
				width: 80%;
				margin-left: 3vw;
			}

			.search-input-button {
				width: 14vw;
				// background-color: #FF5721;
				color: black;
				height: 60%;
				display: flex;
				justify-content: center;
				border-left: 1px solid #e5e5e5;
				align-items: center;
				margin-right: 3vw;
				// border-radius: 2vw;
			}

			image {
				width: 7vw;
				height: 7vw;
				margin: 0 2vw;
				margin-left: 3vw;
			}
		}

		.camera-icon {
			margin-left: 10px;
		}
	}

	.filter-bar {
		display: flex;
		justify-content: space-around;
		padding: 10px 0;
		border-bottom: 1px solid #e5e5e5;

		.filter-item {
			display: flex;
			align-items: center;
		}
	}

	.dropdown-content {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;

		.dropdown-mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.dropdown-menu {
			position: absolute;
			top: 120px;
			left: 0;
			right: 0;
			background-color: #ffffff;
			border-radius: 8px 8px 0 0;
			padding: 10px 0;

			.dropdown-item {
				padding: 10px 15px;

				.active {
					color: #007AFF;
				}
			}
		}
	}

	.item-list {
		flex: 1;
		overflow-y: auto;
	}

	.item-card {
		display: flex;
		padding: 1vh;
		border-bottom: 1px solid #e5e5e5;
		position: relative;

		.item-image {
			width: 12vh;
			height: 14.3vh;
			margin-right: 1vh;
			border-radius: 1vh;
		}

		.item-info {
			flex: 1;

			.item-title {
				font-size: 4vw;
				font-weight: bold;
			}

			.item-location,
			.item-price {
				display: block;
				margin-top: 1vw;
				display: flex;
				justify-content: space-between;
				font-size: 3vw;
				color: #999;
			}

			.item-price {
				color: red;
				font-size: 4vw;
				font-weight: bold;
			}

			.item-user {
				display: flex;
				align-items: center;
				margin-top: 1vw;
				justify-content: space-between;

				.item-user-info {
					display: flex;
					align-items: center;

					.user-name {
						font-size: 3vw;
					}
				}

				.user-avatar {
					width: 7vw;
					height: 7vw;
					border-radius: 50%;
					margin-right: 1vw;
				}

				.user-rating {
					margin-left: 2vw;
					background-color: #FFCA7A;
					color: black;
					width: 22vw;
					height: 2.6vh;
					border-radius: 1.3vh;
					display: flex;
					align-items: center;
					font-size: 3vw;

					image {
						width: 4vw;
						margin-right: 1vw;
						margin-left: 2vw;
						height: 4vw;
						padding-top: 0.5vw;
					}
				}
			}
		}

		.item-views {
			position: absolute;
			top: 2vw;
			right: 2vw;
			font-size: 3.5vw;
			font-weight: 900;
			font-style: italic;
			color: black;

			view {
				position: absolute;
				bottom: 0.5vw;
				background-color: #FFCA7A;
				z-index: -111;
				height: 2vw;
				width: 100%;
			}
		}
	}
	
	.dot {
		image {
			width: 20vw;
			height: 20vw;
			border-radius: 10vw;
			position: fixed;
			bottom: 7vw;
			right: 1vw;
		}
	}
</style>